*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #000;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    width: 60%;
    height: calc(100% - 100px);
    display: flex;
    /* background-color: lightseagreen; */
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
    flex-wrap: wrap;
    color: #00000000;
    user-select: none;
}

.box > div{
    border-radius: 50%;
}

.box > .snake{
    /* background-color: rgb(13, 153, 18); */
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    /* background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); */
}

.box > .head{
    /* background-color: rgb(0, 26, 255); */
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    color: #fff;
    z-index: 99;
}

.box > .n-snake{
    /* background-color: #f70; */
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.box > .n-head{
    /* background-color: #f00; */
    /* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
    color: #fff;
    z-index: 99;
}

.box > .food{
    /* background-color: #ff0; */
    background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%);
    position: relative;
}


.the-charts{
    position: absolute;
    left: 10px;
    top: 10px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
}